<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

			h1,h2,h3,h4,h5,h6{font-weight:normal;}
			.weatherList{
				margin-top:30px;
			}
			.weatherList li{
				width: 122px;
			    height: 246px;
				color: #fff;
				border-radius:5px;
				background: -webkit-gradient(linear,0% 0,0% 100%,from(#50b2fb),to(#a6d4f6));
				float: left;
				position: relative;
			    cursor: pointer;
			    padding-bottom: 6px;
		   		text-align: center;
		   		margin-right:10px;
		   		list-style:none;
			}
			.weatherList li h4{
				font-size: 14px;
			}
			.weatherList li h3{
				font-size: 14px;
			}
			.wrap{
				width: 1000px;
				margin:50px auto;
			}
			#template{
				display:none;
			}
			.search{
				width:370px;
				margin:auto;
				overflow:hidden;
			}
			#city{
				width:280px;
				height:35px;
				line-height:35px;
				border:1px solid #ddd;
				border-right:none;
				float:left;
				text-indent:12px;
				outline:none;
				border-top-left-radius:5px;
				border-bottom-left-radius:5px;
				font-size:14px;
			}
			#submit{
				float:left;
				width:80px;
				height:39px;
				line-height:39px;
				border:1px solid #54b4fb;
				cursor:pointer;
				border-top-right-radius:5px;
				border-bottom-right-radius:5px;
				background: #54b4fb;
				color:#fff;
				outline:none;
			}
			#submit:active{
				background: #479bd6;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="search"><input type="text" id="city" placeholder="请输入查询城市" value="西安">
				<button id="submit" class="btn btn-primary">查询</button></div>
			<h2 style="text-align:center;display:none;" id="title"><span id="citys"></span>未来7天的天气情况</h2>
			<ul class="weatherList"></ul>
			<li id="template">
				<h4 class="date"></h4>
				<h5 class="weather-img"></h5>
				<h5 class="weather"></h5>
				<h3 class="tem"></h3>
				<h3 class="wind"></h3>
				<h3 class="win-scale"></h3>
			</li>
		</div>

	</body>
</html>
<script>
	function $(selector) {
		let result = document.querySelectorAll(selector);
		if (result.length === 1) {
			return result[0];
		} else {
			return result;
		}
	}

	function fncallback(data) {
		let list = data.data;
		$("#title").style.display = "block";
		$(".weatherList").innerHTML = "";
		$("#citys").innerHTML = $("#city").value;

		list.forEach(function(item, index) {

			let newItem = $("#template").cloneNode(true);
			newItem.id = "";
			newItem.style.opacity = 0;
			let dh = setInterval(function() {
				let op = newItem.style.opacity;
				if (op > 1) {
					newItem.style.opacity = 1;
					clearInterval(dh);
					return;
				}
				newItem.style.opacity = +op + 0.03;
			}, 16)
			$(".weatherList").appendChild(newItem);
			newItem.querySelector(".date").innerHTML = item.day;
			newItem.querySelector(".weather").innerHTML = item.wea;
			newItem.querySelector(".wind").innerHTML = item.win;
			newItem.querySelector(".win-scale").innerHTML = item.win_speed;
			if (item.wea === "阴") {
				newItem.style.background = "-webkit-gradient(linear,0% 0,0% 100%,from(#88a9ca),to(#bcd3e3))"
			}
			let origin = newItem.querySelector(".date").innerHTML;
			if (index === 0) {
				newItem.querySelector(".date").innerHTML = origin.replace(/星期./, "今天")
			}
			if (index === 1) {
				newItem.querySelector(".date").innerHTML = origin.replace(/星期./, "明天")
			}
			if (index === 2) {
				newItem.querySelector(".date").innerHTML = origin.replace(/星期./, "后天")
			}
			newItem.querySelector(".tem").innerHTML = `${item.tem1}/${item.tem2}℃`;
		})
	}

	$("#submit").onclick = function() {
		if ($("#city").value === "") {
			alert("请输入城市名称");
			return;
		}
		let city = $("#city").value;
		let script = document.createElement("script");
		script.src =
			`https://v0.yiketianqi.com/api?version=v9&appid=64756263&appsecret=P85LQ34i&callback=fncallback&city=${city}`;
		$("body").appendChild(script);
	}
	document.onkeydown = function(event) {
		if (event.keyCode === 13) {
			$("#submit").click();
		}
	}
	let script = document.createElement("script");
	script.src = `https://v0.yiketianqi.com/api?version=v9&appid=64756263&appsecret=P85LQ34i&callback=fncallback&city=西安`;
	$("body").appendChild(script);
</script>
